<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>赛事证书</title>
    	<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/swiper-3.3.1.min.css" />
    	<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/page.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/competition.css?v=2" />
        <script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script> 
		<script src="{$staticHost}/static/js/vue.min.js"></script> 
		
	</head>
	<style>
   
    .swiper-container {
        width: 95%;
      
     }
     .swiper-wrapper{

     }
    </style>
	<body v-bind:class="{'style-two':matchInfo.template_id==1,'style-three':matchInfo.template_id==2}">
		<section class="rank-mileage">
			<h6 class="all" v-if="matchInfo.user_rank && matchInfo.group_data_info">
				<a v-bind:class="{'line':user_cer}" v-on:click="clickUserCer(true)">个人成绩证书</a>
				<a v-bind:class="{'line':!user_cer}" v-on:click="clickUserCer(false)">群组成绩证书</a>
			</h6>

 
			<div class="certificate" v-show="user_cer">
				<ul class="competitor">
					<li>
						<span>比赛名称<br/>Competition</span>
						<p v-text="matchInfo.name"></p>
					</li>
					<li>
						<span>参赛姓名<br/>Name</span>
						<p v-text="matchInfo.nickname"></p>
					</li>
					<li>
						<span>参赛项目<br/>Cateaory</span>
						<p>个人赛</p>
					</li>
					<li>
						<span>名次<br/>Result</span>
						<p v-text="isNaN(matchInfo.user_rank) ? '未达标' : '第'+matchInfo.user_rank+'名'"></p>
					</li>
				</ul>
				<ul class="data-rank">
					<li v-for="data in matchInfo.user_data">
						<span v-text="data.date"></span>
						{{data.mileage}}km<br />
						{{data.total_rate}}次<br />
						{{data.elapsedtime | seconds2string}}
					</li>
				</ul>
				<ul class="competitor">
					<li>
						<span>参赛时间<br/>Time</span>
						<p v-html="time"></p>
					</li>
				</ul>
				<div class="host">
					<span>主办方<br/>Sponsor</span>
					<img v-bind:src="matchInfo.logo_src" />
				</div>
			</div>
				<!-- 个人 -->

			<div class="swiper-container" >
        	<div class="swiper-wrapper" v-show="!user_cer">
				<section class="certificate swiper-slide" v-for="groupInfo in matchInfo.group_data_info" >
	              	<ul class="competitor">
						<li>
							<span>比赛名称<br/>Competition</span>
							<p v-text="matchInfo.name"></p>
						</li>
						<li>
							<span>参赛群组<br/>Name</span>
							<p v-text="groupInfo.group_name"></p>
						</li>
						<li>
							<span>参赛项目<br/>Cateaory</span>
							<p>群组赛</p>
						</li>
						<li>
							<span>名次<br/>Result</span>
							<p v-text="isNaN(groupInfo.group_rank) ? '未达标' : '第'+groupInfo.group_rank+'名'"></p>
						</li>
					</ul>
					<ul class="data-rank">
						<li v-for="(date,data) in groupInfo.group_data">
							<span v-text="data.date"></span>
							{{data.mileage}}km<br />
							{{data.total_rate}}次<br />
							{{data.elapsedtime | seconds2string}}
						</li>
					</ul>
					<ul class="competitor">
						<li>
							<span>参赛时间<br/>Time</span>
							<p v-html="time"></p>
						</li>
					</ul>
					<div class="host">
						<span>主办方<br/>Sponsor</span>
						<img v-bind:src="matchInfo.logo_src" />
					</div>
	             
				</section>
			</div>
			</div>
			<!-- 群组 -->
		</section>
		
		<p class="p10 ac color_gray f13">
			本活动最终解释权归虎扑跑步所有
		</p>
		 <a class="dow-app color-blue" href="http://mobile.hupu.com/download/joggers?r=share">
			 下载虎扑跑步APP参加 精彩活动
		 </a>
		 
	</body>
    <script src="{$staticHost}/static/js/swiper-3.3.1.jquery.min.js"></script>
	<script>
		var match_id = "{$match_id}";
		var sup = typeof jw === "object";
		if(sup){
		    	$(".dow-app").hide();
		    }
        Vue.filter('seconds2string',function(value){
            var second = parseInt(value)
            var minute = 0
            var hour = 0
            if(second > 60){
                minute = parseInt(second/60)
                second = parseInt(second%60)
                if(minute > 60){
                    hour = parseInt(minute/60)
                    minute = parseInt(minute%60)
                }
            }
            var result = ""+second+"秒"
            if(minute){
                result = ""+minute+"分"+result
            }
            if(hour){
                result = ""+hour+"小时"+result
            }
            return result
        })
        new Vue({
            el: 'body',
            data:{
                matchInfo: {},
                user_cer: true,
                time: ''
            },
            created: function(){
                var self = this
                $.getJSON('{$staticHost}/matchWeb/certificate',{ match_id:match_id }, function(data, error) {
                    self.matchInfo = data.result
                    if(!self.matchInfo.user_rank){
                        self.user_cer = false
                    }
                    var d = new Date()
                    d.setTime(self.matchInfo.stime*1000)
                    self.time = d.getFullYear()+'年'+(d.getMonth()+1)+'月'+d.getDate()+'日 '+d.getHours()+':'+d.getMinutes() + '<br/>'
                    d.setTime(self.matchInfo.etime*1000)
                    self.time += d.getFullYear()+'年'+(d.getMonth()+1)+'月'+d.getDate()+'日 '+d.getHours()+':'+d.getMinutes()


					self.{$doller}nextTick(function(){
						var swiper = new Swiper('.swiper-container');
					})
                });
            },
            methods: {
                clickUserCer: function(user_cer){
                    this.user_cer = user_cer
                }
            }
        })
	</script>
{template 'show/web-footer'}